/**
 * 编辑器中间的画布
 */

$cellSize: 35.6px;
$designerWidth: 320px;
$designerHeight: 568px;

.simulator-editor {
  position: relative;
  top: 60px;
  width: $designerWidth;
  // height: $designerHeight;
  min-height: $designerHeight;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7e7e7;
  &__block{
    position: absolute;
}
}
/**
* 显示容器边界
*/

@mixin showContainerBorder {
    @include showDashedOutline;
  
    &::before {
      @include showCompLabel;
    }
  }
  
  /**
  * 显示组件边界
  */
  @mixin showComponentBorder {
    @include showSoliOutline;
  
    &::before {
      @include showCompLabel;
    }
  }
  
  /**
  * 显示组件标签名称
  */
  @mixin showCompLabel($direction: left) {
    @if ($direction == 'left') {
      top: 0;
      left: -3px;
      transform: translate(-100%, 0);
    }
  
    @if ($direction == 'right') {
      top: 0;
      right: -3px;
      transform: translate(100%, 0);
    }
  
    @if ($direction == 'top') {
      top: 2px;
      left: 0;
      transform: translate(0, -100%);
    }
  
    position: absolute;
    padding: 3px 5px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background-color: #006eff;
    border-radius: 3px;
    content: attr(data-label);
  }
  
  /**
  * 显示实心外边框线
  */
  
  @mixin showSoliOutline($width: 2px) {
    outline: $width solid #006eff;
    outline-offset: -2px;
  }
  
  /**
  * 显示虚线外边框线
  */
  
  @mixin showDashedOutline($width: 2px) {
    outline: $width dashed #b0c1d7;
    outline-offset: -2px;
  }
  